<!--
 * @Author: 码上talk|RC
 * @Date: 2021-08-20 17:09:18
 * @LastEditTime: 2022-02-14 15:59:07
 * @LastEditors: 码上talk|RC
 * @Description: 
 * @FilePath: /ma-distributor/subpackage/member/pages/account/mobile/index.vue
 * @微信:  13680065830
 * @邮箱:  3189482282@qq.com
 * @oops: Just do what I think it is right
-->
<template>
  <div class="change-mobile">
    <view class="form">
      <view class="f-item">
        <a-input class="i-input" placeholder="请输入新手机号码" trim clearable v-model="form.mobile">
          <template v-slot:prefix>
            <icon class="iconfont icon-prefix">&#xe614;</icon>
          </template>
        </a-input>
      </view>
      <view class="f-item">
        <a-input placeholder="请输入手机验证码" trim clearable v-model="form.verifyCode">
          <template v-slot:prefix>
            <icon class="iconfont icon-prefix">&#xe634;</icon>
          </template>
        </a-input>
        <view class="i-btn_code" :style="{ color: color }" @tap="sendVerifyCode">{{ btnText }}</view>
      </view>
    </view>
    <view class="change-btn" :class="isConfirm ? 'active' : ''" @tap="handleChange">确定修改</view>
  </div>
</template>

<script>
  import {
    mapActions
  } from 'vuex';
  import {
    model
  } from '@/model';
  import EventBus from "@/event/index";
  const {
    Member
  } = model.collection;
  const {
    Request
  } = model;

  export default {
    name: '',
    onLoad(params) {
      this.isChangePhone = !!params.isChangePhone
    },
    components: {},
    data() {
      return {
        request: new Request(),
        form: {
          mobile: '',
          verifyCode: ''
        },
        isSending: false,
        currentTime: 60,
        btnText: '获取验证码',
        color: '#db187c'
      }
    },
    computed: {
      isConfirm() {
        if (this.form.mobile && this.form.verifyCode) {
          return true
        }
        return false
      }
    },
    watch: {
      'form.mobile': {
        handler(newVal, oldVal) {
          if (newVal.length === 11) {
            Member.sendApi('info', {
              params: {},
              data: {
                query: {
                  mobile: this.form.mobile
                }
              }
            }).then(res => {
              if (res.data) {
                this.toast('手机号码已注册过，请换个手机号码')
              } else {
                this.isSending = false
              }
            })
          }
          if (newVal.length !== 11) {
            this.isSending = true
          }
        },
        deep: true
      }
    },
    methods: {
      ...mapActions('user', ['logout']),
      handleChange() {
        let len = this.form.mobile.length
        if (!this.form.mobile) return this.toast('请输入新手机号码')
        if (!this.form.verifyCode) return this.toast('请输入手机验证码')
        if (len !== 11) return this.toast('请输入正确的手机号码')
        Member.sendApi('updateSingleField', {
          params: {
            type: 1
          },
          data: {
            value: this.form.mobile,
            verifyCode: this.form.verifyCode
          }
        }).then((res) => {
          if (res.status) {
            this.toast('手机号码修改成功');
            this.isChangePhone && EventBus.$emit("isChangePhone", true);
            setTimeout(() => {
              !this.isChangePhone && this.logout().then(() => {
                this.red('/pages/login/index');
              });
              this.isChangePhone && this.back()
            }, 1500);
          } else {
            this.toast(res.message || '修改失败，请重新修改')
          }
        })
      },
      sendVerifyCode() {
        if (!this.form.mobile) return this.toast('请输入新手机号码！');
        if (this.form.mobile.length !== 11) return this.toast('手机号码格式错误');
        if (this.isSending) {
          this.toast('手机号码已注册过，请换个手机号码');
          return;
        }
        this.request.do('open', 'verify', 'mobileCode', {
          params: {
            app: 'portal',
            bizType: 1,
            mobile: this.form.mobile
          },
          data: {}
        }).then((res) => {
          const {
            status,
            error
          } = res;
          if (status) {
            this.toast('发送验证码成功!');
            this.isSending = true;
            let interval = setInterval(() => {
              this.currentTime--;
              this.btnText = this.currentTime + 's';
              if (this.currentTime <= 0) {
                clearInterval(interval);
                this.btnText = '重新发送';
                this.currentTime = 60;
                this.isSending = false;
                this.color = '#235CFF';
              }
            }, 1000);
          }
        }, (err) => {
          this.toast('无效手机号码！')
        });
      }
    }
  }
</script>
<style lang="less">
  .change-mobile {
    width: 100vw;
    display: flex;
    justify-content: center;

    .form {
      width: 680rpx;
      padding: 0 20rpx;

      .f-item {
        position: relative;
        width: 680rpx;
        height: 100rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid #ccc;

        .icon-prefix {
          width: 60rpx;
          height: 60rpx;
          text-align: center;
          line-height: 60rpx;
          color: #999;
        }

        .i-input {
          width: 100%;
        }

        .i-btn_code {
          position: relative;
          width: 150rpx;
          padding: 0 4rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          border-radius: 15rpx;
          font-size: 26rpx;
          z-index: 99;

          &::before {
            position: absolute;
            content: '';
            top: 15rpx;
            left: -20rpx;
            width: 2rpx;
            height: 34rpx;
            background: #c0c0c0;
          }
        }
      }
    }

    .change-btn {
      position: fixed;
      bottom: 60rpx;
      width: 680rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 32rpx;
      color: #fff;
      border-radius: 10rpx;
      background-color: #e96fba;
    }

    .active {
      background-color: #dc187f;
    }
  }
</style>